<template>
  <div>
    <div v-if="goods.data" class="goods-wrapper">
      <div class="goods-cover">
        <div class="goods-back" @click="goBack">
          <icon symbol="close"></icon>
        </div>
        <slider
          :pagination-visible="true"
          :repeating="true"
          :slides="coverList"
          :auto="5000">
          <div v-for="(item,index) in coverList" :key="index">
            <img :src="'http://www.gogagoga.cc/picfile/'+item"/>
          </div>
        </slider>
      </div>
      <div class="goods-info">
        <div class="p-name">{{goods.data.goName}}</div>
        <div class="p-sale">月销售{{goods.data.goSaleNum}}件</div>
        <div class="p-buy">
          <div class="p-price">¥{{goods.data.goPrice}}元/{{goods.data.unit}}</div>
          <div class="p-control">
            <cart-control :goods="goods.data" :shop="shopId"></cart-control>
          </div>
        </div>
      </div>
      <div class="goods-content">
        <div class="img-box" v-for="item in content">
          <img v-lazy="'http://www.gogagoga.cc'+item" alt="">
        </div>
      </div>
    </div>
    <cart :shop="shopId"></cart>
    <specModal></specModal>
  </div>
</template>
<script lang="babel">
  import specModal from './specModal.vue'
  import Slider from '@components/vue-slider'
  import {isWechat, wechatConfig} from '@utils'
  import {mapGetters} from 'vuex'
  import Icon from '@components/icon.vue'
  import cartControl from './cartControl.vue'
  import Cart from '../Cart'
  const initCart = async(store, shopId) => {
    await store.dispatch('frontend/cart/initCart', shopId)
  }
  export default {
    components: {
      Slider,
      Icon,
      Cart,
      cartControl,
      specModal
    },
    computed: {
      ...mapGetters({
        goods: 'backend/shop/getGoods'
      }),
      coverList() {
        return this.goods.data.picList.split(',')
      },
      content() {
        let m;
        let urls = []
        let content = this.goods.data.goContent;
        let regex = /<img\s+src\s*=\s*"(.+?)"/g;
        while (m = regex.exec(content)) {
          urls.push(m[1]);
        }
        return urls
      }
    },
    data() {
      return {
        goodsId: '',
        shopId: '',
        hasPrev: false
      }
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.hasPrev = !!from.name;
      })
    },
    async mounted() {
      let goodsId = this.goodsId = this.$route.params.id;
      let shopId = this.shopId = this.$route.query.shop || 'WFRWZ001';
      initCart(this.$store, shopId)
      await this.$store.dispatch('backend/shop/getGoods', goodsId);
      if (isWechat()) {
        await wechatConfig();
        let wx = window.wx;
        let _this = this;
        wx.ready(function () {
          wx.onMenuShareTimeline({
            title: _this.goods.data.goName,
            link: window.location.href,
            imgUrl: 'http://www.gogagoga.cc/picfile/' + _this.goods.goPic01
          })
          wx.onMenuShareAppMessage({
            title: _this.goods.data.goName,
            desc: _this.goods.data.goAbout,
            link: window.location.href,
            imgUrl: 'http://www.gogagoga.cc/picfile/' + _this.goods.goPic01
          })
        })
      }

    },
    methods: {
      goBack () {
        if (this.hasPrev) {
          this.$router.back();
        } else {
          this.$router.push({name: 'shop', params: {shopId: this.$route.query.shop || 'WFRWZ001'}})
        }

      }
    }
  }
</script>
<style lang="less" rel="stylesheet/less">
  .goods-wrapper {
    background-color: #fff;
    padding-bottom: 95/75rem;
  }

  .goods-cover {
    width: 10rem;
    height: 10rem;
    background-color: #f0f0f0;
    img{
      width: 100%;
    }
  }

  .goods-back {
    position: absolute;
    top: 30/75rem;
    left: 30/75rem;
    height: 64/75rem;
    width: 64/75rem;
    display: flex;
    z-index: 100;
    justify-content: center;
    border-radius: 50%;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7);
    .Icon {
      display: inline-block;
      width: 28/75rem;
      height: 28/75rem;
      fill: #fff;
    }
  }

  .goods-info {
    padding: 30/75rem 0;
    margin: 0 30/75rem;
    border-bottom: 1px solid #dbdbdb;
    .p-name {
      font-size: 36/75rem;
    }
    .p-sale {
      margin-top: 15/75rem;
      font-size: 30/75rem;
      color: #b2b2b2;
    }
    .p-buy {
      display: flex;
      justify-content: space-between;
      margin-top: 46/75rem;
      font-size: 42/75rem;
      color: #ffb230;
    }
  }

  .goods-content {
    padding: 30/75rem;
    .img-box {
      img[lazy=loading] {
        height: 150/75rem;
      }
      background-color: #f0f0f0;
    }
  }
</style>
